<template>
  <div class="app-container page-container right-side-dialog">
    <!-- 搜索条件 -->
    <div class="header-search single_line">
      <el-form ref="search_form" :model="search" :inline="true" label-width="0">
        <div class="form-area">
          <div class="search_view">
            <el-form-item>
              <el-input v-model="search.search_key" placeholder="请输入搜索关键字姓名/手机号" />
            </el-form-item>
            <div class="btn-area">
              <span class="spp-btn spp-btn-primary" @click="getUserInsidePaginateData()">搜索</span>
              <span class="spp-btn" @click="resetData()">重置</span>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="content_view">
      <!-- 操作按鈕 -->
      <div class="main-header">
        <el-row :gutter="20">
          <el-col :span="4" class="left">用户列表</el-col>
          <el-col :span="20" class="right">
            <span v-if="auth.save != -1" class="spp-btn spp-btn-primary" @click="userInsideEditVisible = true">新增</span>
          </el-col>
        </el-row>
      </div>
      <el-table ref="table" :data="user_inside_paginate_data" :height="height-130" size="mini" strip>
        <el-table-column label="序号" type="index" width="60" />
        <el-table-column label="姓名" prop="user_name" min-width="150" align="left" />
        <el-table-column label="手机号" prop="user_phone" min-width="150" align="left" />
        <el-table-column label="性别" width="200" min-width="100" align="left">
          <template slot-scope="scope">
            <div>{{ scope.row.user_sex ==='1'?'男':scope.row.user_sex ==='0'?'女':'未知' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right" align="left">
          <template slot-scope="scope">
            <el-button v-if="auth.update != -1" type="text" @click="userInsideUpdate(scope.row)">修改</el-button>
            <el-button type="text" class="font_red" v-if="scope.row.status_flag ==='1' && auth.disable != -1" @click="userInsideDisable(scope.row.user_id)">停用</el-button>
            <el-button type="text" class="font_green" v-if="scope.row.status_flag ==='0' && auth.enable != -1" @click="userInsideEnable(scope.row.user_id)">启用</el-button>
            <el-button v-if="auth.role_update != -1" @click="setUserInsideRole(scope.row.user_id)" type="text">分配角色</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="page_size" @pagination="getUserInsidePaginateData" />
    </div>
    <!-- 新增编辑角色 -->
    <el-dialog :title="user_inside_edit_form.title" :append-to-body="true" :visible.sync="userInsideEditVisible" width="720px" :close-on-click-modal="false">
      <el-form ref="user_inside_edit_form" label-width="20px" :model="user_inside_edit_form">
        <el-form-item prop="user_name">
          <div class="form_lable">姓名</div>
          <el-input v-model="user_inside_edit_form.user_name" placeholder="请输入" />
        </el-form-item>
        <el-form-item v-if="user_inside_edit_form.type === 'add'" prop="user_phone">
          <div class="form_lable">手机号</div>
          <el-input v-model="user_inside_edit_form.user_phone" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="user_sex">
          <div class="form_lable">性别</div>
          <el-radio-group v-model="user_inside_edit_form.user_sex">
            <el-radio v-for="(value, key, index) in sex_dic" :key="index" :label="key">{{value}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <span class="spp-btn" @click="userInsideEditVisible = false">取消</span>
        <span class="spp-btn spp-btn-primary" @click="userInsideEditSubmit()">保存</span>
      </span>
    </el-dialog>
    <!-- 角色管理 -->
    <el-dialog title="角色管理" :visible.sync="userInsideRoleVisible" :close-on-click-modal="false" width="720px">
      <el-scrollbar wrap-class="vertical_scrollbar" :style="{height: height + 'px'}">
        <el-tree ref="role_tree" :data="role_tree_data" :props="defaultProps" show-checkbox node-key="role_id" default-expand-all></el-tree>
      </el-scrollbar>
      <div class="dialog-btn" style="text-align: right">
        <span class="spp-btn" @click="userInsideRoleVisible = false">取消</span>
        <span class="spp-btn spp-btn-primary" @click="userInsideRoleSubmit()">保存</span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { paginate, save, update, disable, enable, roleTree, roleUpdate } from '@/api/pajx/sys/user_inside'
import { sex } from '@/api/public'
import { mapState } from 'vuex'
import Pagination from '@/components/Pagination'
export default {
  name: 'SysUserInside',
  components: { Pagination },
  data() {
    return {
      height: window.innerHeight - 135,
      auth: {},
      sex_dic: {},
      search: {
        search_key: ''
      },
      page: 1,
      page_size: 20,
      total: 0,
      user_inside_paginate_data: [],
      userInsideEditVisible: false,
      user_inside_edit_form: {
        title: '新增用户',
        type: 'add',
        user_name: '',
        user_phone: '',
        user_sex: '0',
        user_id: ''
      },
      select_user_id: '',
      userInsideRoleVisible: false,
      role_tree_data: [],
      defaultProps: {
        children: 'roles',
        label: 'lable'
      }
    }
  },
  computed: {
    ...mapState({
      permission: state => state.permission.permission
    })
  },
  watch: {
    userInsideEditVisible(val) {
      if (val) {
        this.user_inside_edit_form.title = this.user_inside_edit_form.type==='add'?'新增用户':'编辑用户'
      }
      if (!val) {
        this.user_inside_edit_form.user_name = ''
        this.user_inside_edit_form.user_phone = ''
        this.user_inside_edit_form.user_sex = '0'
        this.user_inside_edit_form.user_id = ''
        this.user_inside_edit_form.type = 'add'
      }
    }
  },
  methods: {
    // 获取按钮权限
    permissionAuth() {
      this.auth.save = this.permission.indexOf('/api/sys/user/inside/save')
      this.auth.update = this.permission.indexOf('/api/sys/user/inside/update')
      this.auth.enable = this.permission.indexOf('/api/sys/user/inside/enable')
      this.auth.disable = this.permission.indexOf('/api/sys/user/inside/disable')
      this.auth.role_update = this.permission.indexOf('/api/sys/user/inside/role/update')
    },
    // 重置搜索选项
    resetData() {
      Object.assign(this.$data.search, this.$options.data().search)
    },
    // 获取性别字典
    getSexDic() {
      sex().then(response => {
        this.sex_dic = response.data
      })
    },
    // 获取内部用户列表
    getUserInsidePaginateData() {
      paginate(this.search, this.page, this.page_size).then(response => {
        this.user_inside_paginate_data = response.data.list
        this.total = response.data.totalRow
      })
    },
    // 新增编辑用户
    userInsideEditSubmit() {
      if (this.user_inside_edit_form.type === 'add') {
        save(this.user_inside_edit_form).then(response => {
          this.userInsideEditVisible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getUserInsidePaginateData()
        })
      }
      // 修改
      if (this.user_inside_edit_form.type === 'edit') {
        update(this.user_inside_edit_form).then(response => {
          this.userInsideEditVisible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getUserInsidePaginateData()
        })
      }
    },
    // 修改回显
    userInsideUpdate(data) {
      this.userInsideEditVisible = true
      this.user_inside_edit_form.user_name = data.user_name
      this.user_inside_edit_form.user_phone = data.user_phone
      this.user_inside_edit_form.user_sex = data.user_sex
      this.user_inside_edit_form.user_id = data.user_id
      this.user_inside_edit_form.type = 'edit'
    },
    // 停用用户
    userInsideDisable(user_id) {
      this.$confirm('确认要停用该用户吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        disable(user_id).then(response => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getUserInsidePaginateData()
        })
      }).catch(() => {})
    },
    // 启用用户
    userInsideEnable(user_id) {
      this.$confirm('确认要启用该用户吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        enable(user_id).then(response => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getUserInsidePaginateData()
        })
      }).catch(() => {})
    },
    // 角色管理
    setUserInsideRole(user_id){
      this.select_user_id = user_id
      roleTree(this.select_user_id).then(response => {
        this.userInsideRoleVisible = true
        this.role_tree_data = response.data
        var default_role_data = []
        this.role_tree_data.forEach(function( val ) {
          val.lable = val.dept_name
          val.roles.forEach(function( ev ) {
            ev.lable = ev.role_name
            if(ev.user_id){
              default_role_data.push(ev.role_id)
            }
          })
        })
        this.$nextTick(function() {
          this.$refs.role_tree.setCheckedKeys(default_role_data)
        })
      })
    },
    // 角色管理提交
    userInsideRoleSubmit() {
      var role_list = this.$refs.role_tree.getCheckedKeys()
      var role_ids = []
      role_list.forEach(function( val ) {
        if(val){
          role_ids.push(val)
        }
      })
      roleUpdate(this.select_user_id, role_ids.join(',')).then(response => {
        this.userInsideRoleVisible = false
      })
    }
  },
  created() {
    this.permissionAuth()
    this.getSexDic()
    this.getUserInsidePaginateData()
  }
}
</script>
<style lang="scss">
.font_green{
  color: #5FB878;
}
.font_red{
  color: #FF5722;
}
</style>
